<template>
    <div class="login-container">
		<h3>欢迎登录公益募捐平台</h3>
		<div class="login-field">
			<van-field
				placeholder="  请填写用户名/手机号"
				type="tel"
				v-model="loginInfo.donatorPhone"
				clearable
				left-icon="contact-o"
			/>
		</div>
		<div class="login-field">
			<van-field
				placeholder="  请填写密码"
				type="password"
				v-model="loginInfo.donatorPassword"
				clearable
				left-icon="bag-o"
			/>
		</div>
		<div class="footer-field">
			<div @click="toRegister(1)">注册账号</div>
			<div @click="toRegister(0)">忘记密码</div>
		</div>
		<div class="button-field">
			<van-button type="primary" block @click="toLogin" round>登录</van-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { donatorApi } from '../../api/app';
import { showFailToast, showSuccessToast } from 'vant';
import { useRouter } from 'vue-router';
import axios from 'axios';

/** 登录信息 **/
const loginInfo = ref({
	donatorPhone: '',
	donatorPassword: '',
})
const router = useRouter();

/** 登录 */
const toLogin = () => {
	if (loginInfo.value.donatorPhone === '' || loginInfo.value.donatorPassword === '') {
		showFailToast('手机号或密码不能为空');
		return;
	}
	donatorApi.toLogin(loginInfo.value).then(res => {
		if (res) {
			showSuccessToast('登录成功');
			localStorage.setItem('donator', JSON.stringify(res));
			router.push('/donatorMain');
		} else {
			showFailToast('登录失败，请检查手机号或密码');
		}
	});
}

/** 注册 */
const toRegister = (type: number) => {
	router.push('/register/' + type);
}
</script>

<style scoped lang="less">
.login-container {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(270deg, #E1ECFE 0%, #DDFCFF 100%); /** 渐变色 270deg表示方向从左向右 */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.login-field {
		border: 1px solid white;
		border-radius: 5px;
		margin-top: 1em;
	}

	.button-field, .login-field, .footer-field {
		width: 80%;
	}

	.footer-field, .button-field {
		margin-top: 5px;
	}

	.footer-field {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
	}
}
</style>